<template>
  <view class="container">
    <view class="title">选择充值金额</view>
    <view class="choosemoney">
      <view :class="{ item: true, common: active == index }" v-for="(item, index) in moneylist" @click="choosemoney(index)">{{ item + '元' }}</view>
    </view>
    <view style="position: relative; top: 30rpx; left: 0rpx">
      <input type="text" class="inputmoney" placeholder="请输入充值金额" v-model="money" />
      <text style="position: absolute; top: 30rpx; right: 32rpx">元</text>
    </view>
    <!-- 充值按钮 -->
    <view class="btn" @click="topup">确认充值</view>
    <!-- 温馨提示 -->
    <view style="font-weight: 500; font-size: 28rpx; color: #222222; margin-bottom: 12rpx">温馨提示:</view>
    <rich-text :nodes="content"></rich-text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      moneylist: ['50', '100', '200', '500', '1000', '2000'],
      active: null, // 选中的金额
      content: '',
      money: '' // 充值的金额
    };
  },
  onLoad() {
    this.getxieyi();
  },
  methods: {
    // 用户充值
    topup() {
      if (this.money == 0) {
        return uni.showToast({
          title: '充值的金额不能为0',
          icon: 'none'
        });
      }
      this.http('/user/recharge', {
        card: 0,
        money: this.money
      }).then((res) => {
        console.log(res);
        if (res.code == 1) {
          this.http('/user/userRechargePay', {
            user_recharge_id: res.data.user_recharge_id
          }).then((res) => {
            console.log('支付信息', res.data);
            uni.requestPayment({
              provider: 'wxpay',
              package: res.data.package,
              paySign: res.data.paySign,
              nonceStr: res.data.nonceStr,
              timeStamp: res.data.timeStamp,
              signType: res.data.signType,
              success: function (res) {
                console.log('success:' + JSON.stringify(res));
                uni.showToast({
                  title: '充值成功'
                });
              },
              fail: function (err) {
                console.log('fail:' + JSON.stringify(err));
                uni.showToast({
                  title: '充值失败'
                });
              }
            });
            this.money = '';
          });
        } else {
          return uni.showToast({
            title: '充值失败，请检查网络',
            icon: 'none'
          });
        }
      });
    },
    // 选择充值金额
    choosemoney(index) {
      this.active = index;
      this.money = this.moneylist[index];
    },
    // 获取协议内容
    async getxieyi() {
      const res = await this.http('/index/article', {
        type: 4
      });
      console.log('关于我们', res);
      this.content = res.data.conten;
    }
  }
};
</script>

<style lang="scss">
page {
  background-color: #f8f9fa;
}
.container {
  box-sizing: border-box;
  margin-top: 20rpx;
  padding: 34rpx 28rpx;
  .title {
    font-weight: bold;
    font-size: 30rpx;
    color: #001636;
  }
  .choosemoney {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .item {
      box-sizing: border-box;
      width: 210rpx;
      height: 90rpx;
      text-align: center;
      line-height: 90rpx;
      background: #f6f6f6;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      margin: 30rpx 20rpx 0 0;
    }
    .common {
      background: #3483f6;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      font-weight: 500;
      font-size: 30rpx;
      color: #ffffff;
    }
  }
  .inputmoney {
    box-sizing: border-box;
    width: 694rpx;
    height: 100rpx;
    background: #f6f6f6;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    border: 1rpx solid #e2e2e2;
    padding: 28rpx;
    font-size: 30rpx;
    color: #666666;
  }
  .btn {
    box-sizing: border-box;
    width: 654rpx;
    height: 92rpx;
    text-align: center;
    line-height: 92rpx;
    font-weight: 500;
    font-size: 30rpx;
    color: #ffffff;
    background: #3483f6;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 90rpx 48rpx 66rpx 20rpx;
  }
}
</style>
